<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../../bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../bootstrap-icons/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="../../css/index.css">
    <link rel="shortcut icon" href="../../img/A.png" type="image/x-icon">
    <script src="../../bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../../bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="../../vue/jquery.min.js"></script>
    <script src="../../vue/vue.min.js"></script>
    <title>后台管理系统</title>
    <script src="../../echarts/echarts.min.js"></script>
</head>

<body>
<!-- 页面的起步 -->
<div class="container pt-5" style="font-family:'Times New Roman', Times, serif;">
    <div class="row">
        <!--页面导航栏列表 -->
        <div class="col-md-2">
            <!-- 网站logo -->
            <div class="mb-5 bg-light"
                 style="font-family:fantasy;direction: ltr; position: fixed;z-index: 10; left: 65px; top: 38px;">
                <h3><img style=" width: 20%; height: 20%;" src="../../img/A.png"/><span>ArkanTv</span></h3>
            </div>

            <!-- 垂直导航栏 展示导航 -->
            <div class="col-md-2" style="position: fixed;top: 100px; overflow-y:auto;height: 80vh; direction:rtl;">
                <nav class="navbar bg-light" style="direction: ltr;">
                    <div class="container-fluid">
                        <ul class="nav nav-pills flex-column text-start">
                            <li class="nav-item mb-2">
                                <a class="nav-link" href="index.html"><i class="bi bi-text-indent-left"></i><span
                                        class="m-3">统计</span></a>
                            </li>
                            <li class="nav-item mb-2">
                                <a class="nav-link" href="movie"><i class="bi bi-camera-video"></i><span
                                        class="m-3">电影</span></a>
                            </li>

                            <li class="nav-item mb-2">
                                <a class="nav-link active" href="of_play"><i class="bi bi-play-btn"></i><span
                                        class="m-3">短视频</span></a>
                            </li>

                            <li class="nav-item mb-2">
                                <a class="nav-link" href="user"><i class="bi bi-person-add"></i><span
                                        class="m-3">用户管理</span></a>
                            </li>

                            <li class="nav-item mb-2">
                                <a aria-current="page" class="nav-link" href="coin"><i
                                        class="bi bi-coin"></i><span
                                        class="m-3">会员金额</span></a>
                            </li>

                            <li class="nav-item mb-2">
                                <a aria-current="page" class="nav-link" href="prizes"><i
                                        class="bi bi-cash-stack"></i><span
                                        class="m-3">抽奖礼品</span></a>
                            </li>

                            <li class="nav-item mb-2">
                                <a aria-current="page" class="nav-link" href="selection"><i
                                        class="bi bi-signpost-split"></i><span
                                        class="m-3">导航列表</span></a>
                            </li>

                        </ul>
                    </div>
                </nav>
            </div>

        </div>

        <!-- 页面的col-10部分 -->
        <div class="col-md-10 pb-5" style="z-index: 10;" id="ofPlayApp">

            <!-- 日期 / 搜索 -->
            <div class="row">
                <div class="col-md-5">

                    <!-- 当前日期 -->
                    <div class="text-start">
                        <h3>当前日期</h3>
                        <p style="font-family:fantasy;">{{currentDate}}</p>
                    </div>
                </div>


                <!--                &lt;!&ndash; 搜索框 &ndash;&gt;-->
                <div class="col-md-4">
                    <form>
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="输入关键字...">
                            <span class="input-group-text"><button type="button" class="btn  btn-sm"><i
                                    class="bi bi-search"></i></button></span>
                        </div>
                    </form>
                </div>

                <!--                &lt;!&ndash; 登录图标&ndash;&gt;-->
                <div class="col-md-3 text-end">
                    <span>ArTv10001</span>
                    <img src="../../img/tu2.jpg" style="border-radius: 100%; width: 65px; height: 65px;"/>
                </div>
            </div>


            <!-- 本站导航栏 -->
            <div class="row">
                <div class="col-md-12">

                    <!-- 导航 -->
                    <ul class="nav nav-pills">
                        <li class="nav-item">
                            <a class="nav-link active" data-bs-toggle="pill" href="#home">主页</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="pill" href="#menu2">上传</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="pill" href="#menu5">短剧手动补集</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="pill" href="#menu6">短剧自动补集</a>
                        </li>
                    </ul>

                    <!-- 跟导航切换 -->
                    <div class="tab-content">
                        <!--            提示框-->
                        <div v-show="isMessage" style="position: fixed;z-index: 10;top: 20px; left: 50%"
                             class="col-md-2 bg-primary p-1 text-center text-white rounded-1"><b v-text="message"></b>
                        </div>
                        <!-- 电影主页 -->
                        <div class="tab-pane container active text-center " id="home">

                            <!--         加载动画-->
                            <div class="spinner" v-show="load">
                                <div class="bounce1"></div>
                                <div class="bounce2"></div>
                                <div class="bounce3"></div>
                            </div>

                            <!-- 分类展示 -->
                            <div class="row mt-3">
                                <div class="col-md-1">
                                    <b>ID</b>
                                </div>
                                <div class="col-md-3">
                                    <b>封面</b>
                                </div>
                                <div class="col-md-3">
                                    <b>标题</b>
                                </div>

                                <div class="col-md-2">
                                    <b>集数</b>
                                </div>
                                <div class="col-md-1">
                                    <b>状态</b>
                                </div>
                                <div class="col-md-2">
                                    <b>操作</b>
                                </div>
                            </div>
                            <!-- 分类内容 -->
                            <div class="row pt-2 nav-item" style="font-size: 15px; =" v-for='videos in video'>
                                <div class="col-md-1">
                                    <p v-text="videos.id"></p>
                                </div>
                                <div class="col-md-3">
                                    <img v-bind:src="videos.imageUrl" style="width: 60px; height: 30px;"/>
                                </div>
                                <div class="col-md-3">
                                    <p v-text="videos.name">ئانامنىڭ كۆز يىشى</p>
                                </div>

                                <div class="col-md-2">
                                    <p v-show="videos.episode">{{videos.episode }} / {{videos.episodes}}</p>
                                </div>
                                <div class="col-md-1">
                                    <div class="form-check form-switch" style=" cursor: pointer;">
                                        <input @change="oncheckbox" v-model="videos.displayed" v-bind:value="videos.id"
                                               class="form-check-input" type="checkbox" name="checkbox" checked>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="row" style=" cursor: pointer;">
                                        <div class="col text-danger"><a v-bind:href="'#'+videos.id"
                                                                        data-bs-toggle="collapse"><i
                                                @click="oncollapse1" class="bi bi-trash text-danger"></i></a></div>

                                        <!--                              <div class="col text-primary"><i class="bi bi-pencil"></i></div>-->
                                    </div>
                                </div>

                                <div v-bind:id="videos.id" class="collapse row" v-show="isVisible">
                                    <div class="col-md-10 text-danger text-text pb-1">
                                        <b>请仔细观察删除内容:</b>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="row text-end">
                                 <span @click="onDeleteById(videos.id)" style="cursor: pointer;"
                                       class="col text-danger">
                                    是
                                 </span>
                                            <span @click="oncollapse" style="cursor: pointer;" class="col text-primary">
                                    否
                                 </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- 分页 -->
                            <div class="row mt-3">
                                <div class="col">
                                    <ul class="pagination">
                                        <li class="page-item"><a class="page-link" href="#"
                                                                 v-on:click.prevent="ofPlayApp(next.prePage)"><i
                                                class="bi bi-caret-left-fill"></i></a>
                                        </li>
                                        <a class="page-item page-link" href="#"
                                           v-for="n in next.navigatepageNums" v-text="n"
                                           v-on:click.prevent="ofPlayApp(n)"
                                           v-bind:class="{'bg-primary text-light':n === next.pageNum}">1</a>


                                        <li class="page-item"><a class="page-link" href="#"
                                                                 v-on:click.prevent="ofPlayApp(next.nextPage)"><i
                                                class="bi bi-caret-right-fill"></i></a>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                        </div>

                        <!-- 电影上传部分 -->
                        <div class="tab-pane container fade" id="menu2">
                            <!-- 标题 -->
                            <div class="row">
                                <!-- 维标题 -->
                                <div class="col nav-item">
                                    <div class="form-floating mb-3 mt-3">
                                        <input type="text" v-model="insert.name" class="form-control"
                                               id="weibiao"
                                               placeholder="Enter email"
                                               name="email">
                                        <label for="weibiao">标题</label>
                                    </div>
                                </div>

                                <div class="col nav-item">
                                    <div class="form-floating mb-3 mt-3">
                                        <input type="text" v-model="insert.imageUrl" class="form-control"
                                               id="hanbiao"
                                               placeholder="Enter email"
                                               name="email">
                                        <label for="hanbiao">竖式海报_Url</label>
                                    </div>
                                </div>

                            </div>
                            <!-- 地区 种类 -->
                            <div class="row mt-3">
                                <div class="col nav-item">
                                    <div class="form-floating">
                                        <select class="form-select" v-model="insert.tags" id="quyu1"
                                                name="sellist">
                                            <option v-for="res in tags" v-bind:value="res.sortId"
                                                    v-text="res.name"></option>
                                        </select>
                                        <label for="quyu1" class="form-label">类型:</label>
                                    </div>
                                </div>

                                <div class="col nav-item">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" v-model="insert.episode"
                                               id="ImageUrl"
                                               placeholder="Enter email"
                                               name="email">
                                        <label for="ImageUrl">集数：</label>
                                    </div>
                                </div>

                            </div>

                            <!-- 电影讲解 -->
                            <div class="form-floating mt-3 ">
                    <textarea class="form-control nav-item" v-model="insert.content" id="comment" name="text"
                              placeholder="Comment goes here"></textarea>
                                <label for="comment">讲解Content:</label>
                            </div>
                            <!-- 提交按钮  -->
                            <div class="d-grid gap-3 pt-3 pb-3">
                                <button type="button" @click="insertSubmit" class="btn btn-primary btn-block">
                                    <span :class="loading === 1 ? 'spinner-border spinner-border-sm' : ''"></span>
                                    上传
                                </button>
                            </div>

                        </div>
                        <!--                       插入关联短剧联数据-->
                        <div class="tab-pane container fade" id="menu5">
                            <div class="row mt-3">
                                <div class="col">
                                    <img v-bind:src="movie.imageUrl"
                                         style="width: 100%; height: 250px; border-radius: 15px;"/>
                                </div>
                            </div>
                            <!-- 标题 -->
                            <div class="row">
                                <!-- ID -->
                                <div class="col nav-item">
                                    <div class="form-floating mb-3 mt-3">
                                        <input @input="handleInput" type="text" class="form-control" id="Id"
                                               placeholder="Enter email"
                                               name="videoId">
                                        <label for="id">ID</label>
                                    </div>
                                </div>
                                <!-- 维标题 -->
                                <div class="col nav-item">
                                    <div class="form-floating mb-3 mt-3">
                                        <div type="text" v-text="movie.id" class="form-control" id="weibiao">
                                        </div>
                                        <label for="weibiao">剧集_ID:</label>
                                    </div>
                                </div>
                                <div class="col nav-item">
                                    <div class="form-floating mb-3 mt-3">
                                        <div type="text" v-text="movie.episode" class="form-control" id="weibiao">
                                        </div>
                                        <label for="weibiao">总集数:</label>
                                    </div>
                                </div>
                                <div class="col nav-item">
                                    <div class="form-floating mb-3 mt-3">
                                        <div type="text" v-text="movie.episodes" class="form-control" id="weibiao">
                                        </div>
                                        <label for="weibiao">已上传数:</label>
                                    </div>
                                </div>
                                <!--汉标题  -->
                            </div>

                            <!-- Url -->
                            <div class="row mt-1">
                                <div class="col-md-3 nav-item" v-for="res in movie.collectionUrls">
                                    <div class="form-floating mb-3 mt-3">
                                        <input type="text" class="form-control" v-model="res.videoUrl" id="VideoId"
                                               placeholder="Enter email"
                                               name="email">
                                        <label for="VideoId">第 {{res.videoJi}} 集_Url:</label>
                                    </div>
                                    <div class="form-floating">
                                        <select class="form-select" v-model="res.status" id="leixing1" name="sellist">
                                            <option value="1">免费</option>
                                            <option value="2">会员</option>
                                            <option value="3">付费</option>
                                        </select>
                                        <label for="leixing1" class="form-label">第 {{res.videoJi}} 集_状态:</label>
                                    </div>
                                </div>
                            </div>

                            <div class="row mt-1"
                                 v-show="movie.episode > movie.collectionUrls?.length">
                                <div class="col-md-4 nav-item"  v-for="(item , index) in Episode">
                                    <div class="form-floating mb-3 mt-3">
                                        <input type="text" v-model="item.episode" class="form-control" id="hanbiao"
                                               placeholder="Enter email"
                                               name="email">
                                        <label for="hanbiao">补集_集数:</label>
                                    </div>

                                    <div class="form-floating mb-3 mt-3">
                                        <input type="text" v-model="item.videoUrl" class="form-control" id="VideoId"
                                               placeholder="Enter email"
                                               name="email">
                                        <label for="VideoId">补集_Url:</label>
                                    </div>
                                    <div class="form-floating">
                                        <select class="form-select" v-model="item.status" id="leixing1"
                                                name="sellist">
                                            <option value="1">免费</option>
                                            <option value="2">会员</option>
                                            <option value="3">付费</option>
                                        </select>
                                        <label for="leixing1" class="form-label">补集_状态:</label>
                                    </div>
                                </div>

                            </div>
                            <!-- 提交按钮 -->
                            <div class="d-grid gap-3 pt-3">
                                <button type="button" @click="addUrlSubmit" class="btn btn-primary btn-block">
                                    <span :class="loading === 1 ? 'spinner-border spinner-border-sm' : ''"></span> 补集
                                </button>
                            </div>
                        </div>


                        <div class="tab-pane container fade" id="menu6">
                            <div class="row mt-3">
                                <div class="col">
                                    <img v-bind:src="movie.imageUrl"
                                         style="width: 100%; height: 250px; border-radius: 15px;"/>
                                </div>
                            </div>

                            <div class="row">
                                <!-- ID -->
                                <div class="col nav-item">
                                    <div class="form-floating mb-3 mt-3">
                                        <input @input="handleInput" type="text" class="form-control" id="Id"
                                               placeholder="Enter email"
                                               name="videoId">
                                        <label for="id">ID</label>
                                    </div>
                                </div>
                                <!-- 维标题 -->
                                <div class="col nav-item">
                                    <div class="form-floating mb-3 mt-3">
                                        <div type="text" v-text="movie.id" class="form-control" id="weibiao">
                                        </div>
                                        <label for="weibiao">剧集_ID:</label>
                                    </div>
                                </div>
                                <div class="col nav-item">
                                    <div class="form-floating mb-3 mt-3">
                                        <div type="text" v-text="movie.episode" class="form-control" id="weibiao">
                                        </div>
                                        <label for="weibiao">总集数:</label>
                                    </div>
                                </div>
                                <div class="col nav-item">
                                    <div class="form-floating mb-3 mt-3">
                                        <div type="text" v-text="movie.episodes" class="form-control" id="weibiao">
                                        </div>
                                        <label for="weibiao">已上传数:</label>
                                    </div>
                                </div>
                                <!--汉标题  -->
                            </div>

                            <!-- 标题 -->
                            <div class="row mt-3"  v-show="movie.name">
                                <div class="col-md-9 nav-item">
                                    <div class="form-floating mb-3 mt-3">
                                        <input v-model="movie.name" type="text" class="form-control" id="Id"
                                               placeholder="Enter email"
                                               name="videoId">
                                        <label for="id">短剧标题：</label>
                                    </div>
                                </div>

                                <div class="col-md-3 nav-item">
                                    <div class="form-floating mb-3 mt-3">
                                       <button @click="handleUrlInput" class="btn btn-primary btn-block">链接COS存储</button>
                                        <span :class="loadings === 1 ? 'spinner-border spinner-border-sm' : ''"></span>
                                    </div>
                                </div>
                            </div>

                            <!-- Url -->
                            <div class="row mt-1">
                                <div class="col-md-3 nav-item" v-for="res in movie.collectionUrls">
                                    <div class="form-floating mb-3 mt-3">
                                        <input type="text" class="form-control" v-model="res.videoUrl" id="VideoId"
                                               placeholder="Enter email"
                                               name="email">
                                        <label for="VideoId">第 {{res.videoJi}} 集_Url:</label>
                                    </div>
                                    <div class="form-floating">
                                        <select class="form-select" v-model="res.status" id="leixing1" name="sellist">
                                            <option value="1">免费</option>
                                            <option value="2">会员</option>
                                            <option value="3">付费</option>
                                        </select>
                                        <label for="leixing1" class="form-label">第 {{res.videoJi}} 集_状态:</label>
                                    </div>
                                </div>
                            </div>

                            <div class="row mt-1">
                                <div class="col-md-6 nav-item"  v-for="(tes , index) in CosSelectUrl" >
                                    <div class="form-floating mb-3 mt-3">
                                        <input type="text" v-model="tes.episode "   class="form-control" id="hanbiao"
                                               placeholder="Enter email"
                                               name="email">
                                        <label for="hanbiao">补集_集数:</label>
                                    </div>

                                    <div class="form-floating mb-3 mt-3">
                                        <input type="text" v-model="tes.cdnUrl"  class="form-control" id="VideoId"
                                               placeholder="Enter email"
                                               name="email">
                                        <label for="VideoId">补集_Url:</label>
                                    </div>
                                    <div class="form-floating">
                                        <select class="form-select" v-model="tes.status"  id="leixing1"
                                                name="sellist">
                                            <option value="1">免费</option>
                                            <option value="2">会员</option>
                                            <option value="3">付费</option>
                                        </select>
                                        <label for="leixing1" class="form-label">补集_状态:</label>
                                    </div>
                                </div>

                            </div>
                            <!-- 提交按钮 -->
                            <div class="d-grid gap-3 pt-3">
                                <button type="button" @click="addUrlAptematicSubmit" class="btn btn-primary btn-block">
                                    <span :class="loading === 1 ? 'spinner-border spinner-border-sm' : ''"></span> 补集
                                </button>
                            </div>
                        </div>


                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<script src="../../js/utils.js"></script>
<script src="../../js/of_play.js"></script>
<!--删除弹出框-->
<script>
    var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
    var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
        return new bootstrap.Popover(popoverTriggerEl)
    })
</script>


</html>